<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: flex-start;">
			<view style="padding: 0 44rpx;box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
		</view>
		<view class="head-card">
			<view class="social-title">輸入4位驗證碼</view>
			<view class="subtitle">
				<view class="subtitle-info">發送至</view>
				<view class="subtitle-info">+{{code}}</view>
				<view class="subtitle-info">{{mobile}}</view>
			</view>
		</view>
		<view class="code-form-input">
			<view>
				<u-code-input 
					mode="box" 
					:maxlength="4" 
					borderColor="#27C5D6" 
					:focus="true"
					v-model="captcha"
					:size="128"
					:space="32"
					:fontSize="44"
				></u-code-input>
			</view>
		</view>
		<view>
			<view :class="{'social-btn': isInputEmpty, 'social-btn-active': !isInputEmpty }" @click="submitCheck" >完成驗證</view>
		</view>
		<view class="footer">
			<view :class="{'footer-reset-btn':!showTimer,'footer-reset-btn-active':showTimer}" @click="resetSubmit">
				重新發送 {{timer}}秒
			</view>
		</view>
		<custom-toast ref="toast" title="發送成功" image="/static/images/icon/success-circle.png" position="center" />
	</view>
</template>

<script>
	import uCodeInput from '@/uni_modules/uview-ui/components/u-code-input/u-code-input.vue';
	import { checkMessage,mobileLogin,getUserInfo } from '@/config/api.js';
	export default {
		data() {
			return {
				code:'',//區號
				mobile:'',
				isInputEmpty:true,
				captcha:'',//驗證碼
				timer:60,
				showTimer:false
			}
		},
		watch: {
		    captcha(newVal) {
			  this.isInputEmpty = newVal.trim().length < 4; // 根据input的值判断是否为空
			}
		},
		components: {
			uCodeInput
		},
		onLoad(option) {
			console.log(option);
			
			this.code = option.code;
			this.mobile = option.mob;
			if( this.code.trim() != '' && this.mobile.trim() != '' ){
				this.sendMsg();
			}
		},
		methods: {
			//發送短信
			sendMsg(){
				let that = this;
				let params = {
					code:this.code,
					mobile:this.mobile
				}
				console.log(params)
				checkMessage(params).then((res) => {
					console.log(res)
					//success
					// uni.showToast({
					// 	title: '發送成功',
					// 	icon:'none',
					// 	duration: 2000,
					// 	image: '/static/images/icon/success-circle.png',
					// 	success:function(){
							
					// 	}
					// });
					that.$refs.toast.show();
					//啟動倒計時
					that.setTimer();
					
				}).catch((e) =>{
					uni.showModal({
						title: '發送失败',
						content: '手機號碼有誤，請檢查後再試',
						confirmText:'確認',
						showCancel:false,
						confirmColor:'#007AFF',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateBack();
							}
						}
					});
					console.log(e)
				})
			},
			setTimer(){
				let that = this;
				if( that.timer <= 0 ){
					that.timer = 60;
					that.showTimer = true;
				} else {
					that.showTimer = false;
					that.timer--;
					setTimeout(function(){
						that.setTimer();
					},1000)
				}
			},
			submitCheck(){
				if( this.captcha.trim() === '' ){
					return;
				}
				let that = this;
				let params = {
					captcha:this.captcha,
					mobile:this.mobile,
					code:this.code,
					type:1,
					cid:0
				}
				mobileLogin(params).then((res) => {
					console.log(res)
					//success
					
					//保存登入token
					uni.setStorageSync('token', res.token);
					that.getUserInfo()
					
					uni.showToast({
						title: '登入成功',
						icon:'none',
						duration: 2000,
						image: '/static/images/icon/success-circle.png',
						success:function(){
							
						}
					});
				}).catch(() =>{
					uni.showModal({
						title: '驗證失敗',
						content: '驗證碼錯誤，請檢查後再試',
						confirmText:'確認',
						showCancel:false,
						confirmColor:'#007AFF',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				})
			},
			resetSubmit(){
				if(this.timer != 60){
					return;
				}
				this.captcha = '';
				this.sendMsg();
			},
			getUserInfo(){
				getUserInfo().then((res) => {
					//success
					console.log(res)
					
					uni.setStorageSync('userInfo', res);//保存用戶信息
					uni.setStorageSync('userId', res.id);//保存用戶信息
					
					setTimeout(function(){
						uni.reLaunch({
							url: '/pages/home/index'
						});
					},1500);
				}).catch(() =>{
					
				})
			},
			goBack(){
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
	}
	.head-card{
		width: 100%;
		margin-top: 154rpx;
		padding-left: 56rpx;
	}
	.subtitle{
		display: flex;
		justify-content: flex-start;
		margin-top: 20rpx;
		color: #6A707C;
		font-size: 36rpx;
	}
	.subtitle-info{
		margin-right: 10rpx;
	}
	.code-form-input{
		width: 100%;
		margin: 108rpx auto 56rpx;
		display: flex;
		justify-content: center;
	}
	.footer{
		margin: 56rpx auto;
		width: 100%;
		text-align: center;
	}
	.footer-reset-btn{
		color: #808690;
		font-size: 28rpx;
	}
	.footer-reset-btn-active{
		color: #27C5D6;
		font-size: 28rpx;
	}
	.u-code-input__item{
		border-radius: 50% !important;
	}
</style>
